<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
	div {
		border: 3px solid black;
		margin: 3px;
		padding: 2px;
		background-color: white;
	}
	
	.static {
		position: static;
	}
	.absolute {
		position: absolute;
		top: 60px;
		left: 50px;
		width: 300px;
	}
	.relative {
		position: relative;
		top: 100px;
		left: 50px;
		width: 300px;
	}
</style>
</head>
<body>
	<div class="static" style="border-style: solid;">
		1 static container
		<div class="static" style="border-style: solid;">
			1 static
		</div>
		<div class="absolute" style="border-style: solid;">
			1 absolute
		</div>
		<div class="relative" style="border-style: solid;">
			1 relative
		</div>
	</div>
	<div class="absolute" style="border-style: dotted;">
		2 absolute container
		<div class="static" style="border-style: dotted;">
			2 static
		</div>
		<div class="absolute" style="border-style: dotted;">
			2 absolute
		</div>
		<div class="relative" style="border-style: dotted;">
			2 relative
		</div>
	</div>
	<div class="relative" style="border-style: double;">
		3 relative container
		<div class="static" style="border-style: double;">
			3 static
		</div>
		<div class="absolute" style="border-style: double;">
			3 absolute
		</div>
		<div class="relative" style="border-style: double;">
			3 relative
		</div>
	</div>
</body>
</html>
